<template>
  <div id="testQuestionView">
    <a-card class="questionList">
      <h2 style="text-align: center">试卷预览</h2>
      <a-divider class="divider" />
      <a-card
        class="questionItem"
        v-for="(question, index) in questions"
        :key="question.id"
        style="margin-bottom: 20px"
      >
        <a-form>
          <a-form-item>
            <h3>{{ index + 1 }}. {{ question.title }}</h3>
          </a-form-item>
          <a-form-item> 难度：{{ question.tags.join(", ") }} </a-form-item>
          <a-form-item> 描述：{{ question.content }} </a-form-item>
          <a-form-item>
            通过率：{{ question.acceptNum }}/{{ question.submitNum }} ({{
              getPassRate(question)
            }}%)
          </a-form-item>
          <a-form-item>
            <p>答案：</p>
            <a-textarea
              v-model="question.answer"
              autoSize
              placeholder="输入你的答案"
            />
          </a-form-item>
          <a-form-item>
            <a-card title="判例">
              <a-form>
                <a-form-item
                  v-for="(caseItem, i) in question.judgeCase"
                  :key="i"
                >
                  输入：{{ caseItem.input }}，输出：{{ caseItem.output }}
                </a-form-item>
              </a-form>
            </a-card>
          </a-form-item>
          <a-form-item>
            时间限制：{{ question.judgeConfig.timeLimit }} ms，内存限制：{{
              question.judgeConfig.memoryLimit
            }}
            KB
          </a-form-item>
        </a-form>
      </a-card>
      <div style="text-align: center">
        <a-button
          type="primary"
          @click="submitExam"
          :style="{ background: '#065ACC', margin: '0 auto' }"
          >创建比赛</a-button
        >
      </div>
    </a-card>
    <!--    <div class="questions-list">-->
    <!--      <div-->
    <!--        v-for="(question, index) in questions"-->
    <!--        :key="question.id"-->
    <!--        class="question-item"-->
    <!--      >-->
    <!--        <h2>{{ index + 1 }}. {{ question.title }}</h2>-->
    <!--        <p>难度：{{ question.tags.join(", ") }}</p>-->
    <!--        <p>描述：{{ question.content }}</p>-->
    <!--        <p>-->
    <!--          通过率：{{ question.acceptNum }}/{{ question.submitNum }} ({{-->
    <!--            getPassRate(question)-->
    <!--          }}%)-->
    <!--        </p>-->
    <!--        <p>-->
    <!--          答案：<textarea-->
    <!--            v-model="question.answer"-->
    <!--            placeholder="输入你的答案"-->
    <!--          ></textarea>-->
    <!--        </p>-->
    <!--        <p>判例：</p>-->
    <!--        <ul>-->
    <!--          <li v-for="(caseItem, i) in question.judgeCase" :key="i">-->
    <!--            输入：{{ caseItem.input }}，输出：{{ caseItem.output }}-->
    <!--          </li>-->
    <!--        </ul>-->
    <!--        <p>-->
    <!--          时间限制：{{ question.judgeConfig.timeLimit }} ms，内存限制：{{-->
    <!--            question.judgeConfig.memoryLimit-->
    <!--          }}-->
    <!--          KB-->
    <!--        </p>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <button @click="submitExam">提交试卷</button>-->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; // 导入 useRouter 和 useRoute
import axios from "axios";
import { useStore } from "vuex";
import { Message } from "@arco-design/web-vue";

const store = useStore();
const router = useRouter(); // 添加这一行
const route = useRoute();
const examId = ref(route.params.id);
const questions = ref([]);
const loading = ref(true);

const fetchQuestions = () => {
  store.commit("loading/showLoading", true);
  axios
    .get("http://localhost:8121/api/examQuestion/getQuestionsByExamId", {
      params: { examId: examId.value },
    })
    .then((response) => {
      console.log("Received Questions:", response.data);
      questions.value = response.data.map((question) => ({
        ...question,
        tags: JSON.parse(question.tags), // 假设 tags 是一个 JSON 字符串数组
        judgeCase: JSON.parse(question.judgeCase), // 假设 judgeCase 是一个 JSON 字符串数组
        judgeConfig: JSON.parse(question.judgeConfig), // 假设 judgeConfig 是一个 JSON 字符串对象
      }));
      store.commit("loading/showLoading", false);
    })
    .catch((error) => {
      console.error("获取题目数据失败:", error);
      Message.error("获取题目数据失败:" + error);
      // generateDefaultQuestions();
    })
    .finally(() => {
      loading.value = false;
    });
};

const getPassRate = (question) => {
  return ((question.acceptNum / question.submitNum) * 100).toFixed(2);
};

const submitExam = () => {
  console.log("Exam submitted");
  router.push("/manage/test");
};

onMounted(() => {
  fetchQuestions();
});
</script>

<style scoped>
.questionList {
  width: 100vh;
}
.divider {
  margin: 10px 0 20px 0;
}
.arco-form-item {
  flex-direction: column;
}
:deep(.arco-form-item-content-flex) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}
</style>
